<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
    <%@ page import="com.ysd.entity.YongHu"%>
    <%@ taglib uri="http://java.sun.com/jsp/jstl/core"  prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>个人信息</title>
<link rel="stylesheet" href="/wk2un10/houtai/lib/layui/css/layui.css">
</head>
<body  class="login-bg">
<%
HttpSession s = request.getSession();
YongHu y = (YongHu) s.getAttribute("user");//获取session数据

%>

<form class="layui-form" action="">
<div class="layui-form-item">
    <label class="layui-form-label">姓名</label>
    <div class="layui-input-block">
      <input type="text" name="name" id="name" value="<%=y.getName() %>" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
    </div>
  </div>
<div class="layui-form-item">
    <label class="layui-form-label">性别</label>
    <div class="layui-input-block">
      <input type="text" name="sex" id="sex" value="<%=y.getSex() %>" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">邮箱</label>
    <div class="layui-input-block">
      <input type="text" name="email" id="email" value="<%=y.getEmail() %>" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">电话</label>
    <div class="layui-input-block">
      <input type="text" name="phone" id="phone" value="<%=y.getPhone() %>" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">头像</label>
    		<div class="layui-input-block">
      			<input type="text" name="imgUrl" id="imgUrl" value="<%=y.getImgUrl() %>" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
    			<img src="<%=y.getImgUrl()%>" style="width: 150px; height: 100px;">
    			<button type="button" class="layui-btn" id="test1">
  					<i class="layui-icon">&#xe67c;</i>上传图片
				</button>
    		</div>
    			
    		<div>
				<img id="imgFace" style="width:120px" src/>
			</div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">签名</label>
    <div class="layui-input-block">
      <input type="text" name="sign" id="sign" value="<%=y.getSign() %>" required  lay-verify="required" placeholder="请输入标题" autocomplete="off" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item">
    <div class="layui-input-block">
    <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
    </div>
  </div>
  </form>
  <script type="text/javascript" src="/wk2un10/houtai/lib/layui/layui.all.js"></script>
  <script type="text/javascript" src="/wk2un10/houtai/lib/layui/layui.js"></script>
		<script>
			//Demo
			layui.use(['form','layedit','upload'], function() {
				var form = layui.form;
				var $ = layui.jquery; //引入jquery
				var layedit=layui.layedit;
				var sign = layedit.build('sign');
				var upload = layui.upload;
				
				 var uploadInst = upload.render({
					    elem: '#test1' //绑定元素
					    ,url: '/wk2un10/userssqlServlet?method=upload' //上传接口
					    ,done: function(res){
					      //上传完毕回调
					      console.log(res);
					      $("#imgUrl").val('./images/'+res.data)
					      $("#imgFace").attr('src','./images/'+res.data)
					    }
					    ,error: function(){
					      //请求异常回调
					    }
					  });
				//监听提交
				form.verify({
					content:function(value){
						return layedit.sync(sign);
						
						
					}
				});
				form.on('submit(formDemo)', function(data) {
					var d = data.field; //表单中的数据，定义一个对象来接收
					//通过ajax向数据库提交数据了
					d.method="update";
					console.log(d); //提交之前的一个数据验证、通过打印的方式先手动的去判断一下这个数据
					var url ='/wk2un10/userssqlServlet';//地址不对
					//确保数据没有问题就进行ajax提交了
					$.post(url, d,
						function(data) {
							if(data.count>0){//对应Result里面的count
								console.log('修改成功');
								layer.msg('修改成功'); 
							}
						}, "json");
					return false;
				});
			});
		</script>
  </body>
</html>